import React, { useState, useEffect } from "react";
import style from "./style.module.scss";
import { getVideos, getComments, getPost, getRealUrl } from "../../Api";

const Play = ({ match }) => {
  const { id } = match.params;
  const [videosource, setsource] = useState({
    id: 0,
    time: new Date(),
    title: "",
    content: ""
  });
  const [videos, setvideo] = useState([]);
  const [comments, setcomments] = useState([]);
  const [result, setresult] = useState({});
  const [currIndex, setCurr] = useState(0);

  useEffect(() => {
    getVideos(id).then(res => {
      if(res.videos) {
        setvideo(res.videos);
        getRealUrl(res.videos[0].content).then(res2 => {
            let realSource = res.videos[0];
            realSource.type = res2.type;
            realSource.url = res2.url;
            setsource(realSource);
        })
      }
    });
  }, [id]);
  useEffect(() => {
    getComments(id).then(res => {
        if(res.comments) {
            setcomments(res.comments);
        }
    });
  }, [id]);
  useEffect(() => {
    getPost(id).then(res => {
      setresult(res.result);
    });
  }, [id]);

  useEffect(() => {
    document.getElementById('root').scrollIntoView(true);
  })

  const activeSource = index => {
    setCurr(index);
    getRealUrl(videos[index].content).then(res => {
        let realSource = videos[index];
        realSource.type = res.type;
        realSource.url = res.url;
        setsource(realSource);
    })
  }

  return (
    <div className={style.play_warp}>
      <div className={style.play_page}>
        <h5>{result.title}</h5>
        <ul className={style.tags}>
          <li>{result.time}</li>
          <li>{result.sort}</li>
          <li>{result.tag}</li>
        </ul>
        <div className={style.img_warp}>
          <img src={result.img} alt="pic" />
        </div>
        <div className={style.info_warp}>
          <p>简介</p>
          <article>{result.text}</article>
        </div>
        <div className={style.video_warp}>
          <p>番剧</p>
          <div className={style.video_container}>
            <video controls src={videosource.url} />
          </div>
          <ul className={style.sources}>
            {videos.map((source, index) => (
              <li
                className={index === currIndex ? style.active : ""}
                key={source.id}
                onClick={() => activeSource(index)}
              >
                <span>P{index + 1}</span>
                <span>{source.title}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className={style.comments_warp}>
          <p>吐糟</p>
          <div className={style.spit}>
            共有 <span>{comments.length}</span> 条吐槽
          </div>
          <ul>
            {comments.map(comment => (
              <li key={comment.id}>
                <span className={style.user_time}>
                  <i>{comment.uname}</i>
                  <b>{comment.ctime}</b>
                </span>
                <span className={style.user_comment}>{comment.content}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default Play;
